forum

home / developersection / forums / check the radio button with the help of an jquery

Ask Question

Check the Radio button with the help of an jQuery

Ethan Karla 271 28-Jul-2021

How to check the Radio button with the help of an jQuery?

jquery jquery 
Updated on 26-Nov-2023
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow Message
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

26-Nov-2023

To check a radio button using jQuery, you can use the prop() method to set the checked property to true. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Check Radio Button with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<label>
  <input type="radio" name="gender" value="male"> Male
</label>

<label>
  <input type="radio" name="gender" value="female"> Female
</label>

<button id="checkMale">Check Male</button>
<button id="checkFemale">Check Female</button>

<script>
  $(document).ready(function() {
    // Check the male radio button
    $('#checkMale').on('click', function() {
      $('input[name="gender"][value="male"]').prop('checked', true);
    });

    // Check the female radio button
    $('#checkFemale').on('click', function() {
      $('input[name="gender"][value="female"]').prop('checked', true);
    });
  });
</script>

</body>
</html>

In this example:

  • Two radio buttons with the same name attribute create a radio button group.
  • The "Check Male" and "Check Female" buttons have IDs (checkMale and checkFemale) and are associated with click events.
  • When the buttons are clicked, the corresponding radio button is checked using the prop('checked', true) method.

This example demonstrates how to programmatically check a radio button using jQuery. Adjust the code based on your specific HTML structure and requirements.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy